<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Effects</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="effects_combi.css" rel="stylesheet" type="text/css" />
    <script src="../../MochiKit/MochiKit.js" type="text/javascript"></script>
    <script src="../../MochiKit/New.js" type="text/javascript"></script>
    <script src="../../MochiKit/Visual.js" type="text/javascript"></script>
</head>

<body>
	<h3>Here are demos of all combination effects:</h3>
 <div class="demo">
      <div class="example" id="demo-effect-appear" onclick="MochiKit.Visual.appear('demo-effect-fade')">
        <span>Click for Visual.appear demo</span>
      </div>
      <div class="example" id="demo-effect-fade" onclick="MochiKit.Visual.fade(this)">
        <span>Click for Visual.fade demo</span>
      </div>
      <div class="example" id="demo-effect-puff" onclick="MochiKit.Visual.puff(this)">
        <span>Click for Visual.puff demo</span>
      </div>
      <div class="example" id="demo-effect-blinddown" onclick="MochiKit.Visual.blindDown(this)">
        <div style="height:120px;">

          <span>Click for Visual.blindDown demo</span>
        </div>
      </div>
      <div class="example" id="demo-effect-blindup" onclick="MochiKit.Visual.blindUp(this)">
        <span>Click for Visual.blindUp demo</span>
      </div>
      <div class="example" id="demo-effect-switchoff" onclick="MochiKit.Visual.switchOff(this)">
        <span>Click for Visual.switchOff demo</span>
      </div>
      <div class="example" id="demo-effect-slidedown" onclick="MochiKit.Visual.slideDown(this)"><div style="height:120px;">
        <span>Click for Visual.slideDown demo</span>
      </div></div>
      <div class="example" id="demo-effect-slideup" onclick="MochiKit.Visual.slideUp(this)"><div style="height:120px;">
        <span>Click for Visual.slideUp demo</span>
      </div></div>
      <div class="example" id="demo-effect-dropout" onclick="MochiKit.Visual.dropOut(this)">
        <span>Click for Visual.dropOut demo</span>
      </div>
      <div class="example" id="demo-effect-shake" onclick="MochiKit.Visual.shake(this)">
        <span>Click for Visual.shake demo</span>
      </div>
      <div class="example" id="demo-effect-pulsate" onclick="MochiKit.Visual.pulsate(this)">
        <span>Click for Visual.pulsate demo</span>
      </div>
      <div class="example" id="demo-effect-squish" onclick="MochiKit.Visual.squish(this)">
        <span>Click for Visual.squish demo</span>
      </div>
      <div class="example" id="demo-effect-fold" onclick="MochiKit.Visual.fold(this)">
        <span>Click for Visual.fold demo</span>
      </div>
       <div class="example" id="demo-effect-grow" onclick="MochiKit.Visual.grow(this)">
        <span>Click for Visual.grow demo</span>
      </div>
      <div class="example" id="demo-effect-shrink" onclick="MochiKit.Visual.shrink(this)">
        <span>Click for Visual.shrink demo</span>
      </div>
      <div class="example" id="demo-effect-highlight" onclick="new MochiKit.Visual.Highlight(this)">
        <span>Click for Visual.Highlight demo</span>
      </div>
</div>

	<h3>Here are all demos on one single element:</h3>
 <ul class="demo">
    <li onclick="MochiKit.Visual.appear('demo-all')">Click for Visual.appear demo</li>
    <li onclick="MochiKit.Visual.fade('demo-all')">Click for Visual.fade demo</li>
    <li onclick="MochiKit.Visual.puff('demo-all')">Click for Visual.puff demo</li>
    <li onclick="MochiKit.Visual.blindDown('demo-all')">Click for Visual.blindDown demo</li>
    <li onclick="MochiKit.Visual.blindUp('demo-all')">Click for Visual.blindUp demo</li>
    <li onclick="MochiKit.Visual.switchOff('demo-all')">Click for Visual.switchOff demo</li>
    <li onclick="MochiKit.Visual.slideDown('demo-all')">Click for Visual.slideDown demo</li>
    <li onclick="MochiKit.Visual.slideUp('demo-all')">Click for Visual.slideUp demo</li>
    <li onclick="MochiKit.Visual.dropOut('demo-all')">Click for Visual.dropOut demo</li>
    <li onclick="MochiKit.Visual.shake('demo-all')">Click for Visual.shake demo</li>
    <li onclick="MochiKit.Visual.pulsate('demo-all')">Click for Visual.pulsate demo</li>
    <li onclick="MochiKit.Visual.squish('demo-all')">Click for Visual.squish demo</li>
    <li onclick="MochiKit.Visual.fold('demo-all')">Click for Visual.fold demo</li>
    <li onclick="MochiKit.Visual.grow('demo-all')">Click for Visual.grow demo</li>
    <li onclick="MochiKit.Visual.shrink('demo-all')">Click for Visual.shrink demo</li>
    <li onclick="new MochiKit.Visual.Highlight('demo-all')">Click for Visual.Highlight demo</li>
    <li onclick="MochiKit.Visual.toggle('demo-all', 'blind')">Click for Visual.toggle demo (blind)</li>
    <li onclick="MochiKit.Visual.toggle('demo-all', 'slide')">Click for Visual.toggle demo (slide)</li>
    <li onclick="MochiKit.Visual.toggle('demo-all', 'appear')">Click for Visual.toggle demo (appear)</li>
    <li onclick="MochiKit.Visual.toggle('demo-all', 'size')">Click for Visual.toggle demo (size)</li>
</ul>
      <div id="demo-all">
        <span>Click on one of the left to see the effect</span>
      </div>
<span id="reset" onclick="new MochiKit.Visual.appear('demo-all')">Click here to reset box</span>

    <div>
    Links to other samples:
    <ul>
    <li><a href="effects_bigslide.html">Big slide effects</a></li>
    <li><a href="effects_slide.html">Slide effects</a></li>
    <li><a href="effects_blind.html">Blind effects</a></li>
    <li><a href="effects_blindslide.html">Blind/Slide effects</a></li>
    <li><a href="effects_fadeappear.html">Fade/Appear effects</a></li>
    <li><a href="effects_onload.html">Onload effects</a></li>
    <li><a href="effects_scroll.html">Scroll effects</a></li>
    <li><a href="effects_grow_shrink.html">Grow/Shrink effects</a></li>
    <li><a href="effects_queue.html">Queue effects</a></li>
    <li><a href="effects_queue_limit.html">Queue limit effects</a></li>
    </ul>
    </div>
</body>
</html>
